import React from 'react';
import { USER_DASHBOARD_PATH } from '@/utils/const';
import { connect } from 'umi';
import { DropdownMenu } from '@apulis/header';
import SelectLang from '../SelectLang';
import Avatar from './AvatarDropdown';
import AGroupSelector from '@apulis/group-selector';
import styles from './index.less';

const GlobalHeaderRight = (props) => {
  const { theme, layout, platformInfo } = props;

  let className = styles.right;

  if (theme === 'dark' && layout === 'topmenu') {
    className = `${styles.right}  ${styles.dark}`;
  }

  return (
    <div
      className={className}
      style={{ display: 'flex', alignItems: 'center', marginRight: '20px' }}
    >
      <AGroupSelector path={'/AIStudio/apflow'}/>
      {/* <div className={styles.dropdownMenu}>
        <DropdownMenu
          menu={[{
            url: USER_DASHBOARD_PATH,
            text: platformInfo?.iamTitle || JSON.parse(localStorage.getItem('platformConfig'))?.iamTitle
          }]}
        />
      </div> */}
      <Avatar menu />
    </div>
  );
};

export default connect(({ settings, common, global }) => ({
  theme: settings.navTheme,
  layout: settings.layout,
  projectName: common.projectName,
  platformInfo: common.platformInfo,
  global
}))(GlobalHeaderRight);